import { Carousel, Col, Row } from "antd";
import Image from "next/image";
import { ArrowRightOutlined } from "@ant-design/icons";
import Link from "next/link";

import "./page.scss";
import path from "path";
import fsPromises from "fs/promises";

// 首页

const imgs = [
  {
    src: "/zhiping/homegb1.jpg",
    alt: "Image 1",
    dis: "通过开放标准的 MQTT 或 CoAP 协议，以可靠、高效、安全的方式连接数以亿计的物联网设备，稳步开启您的物联网业务",
  },
  {
    src: "/zhiping/homegb1.jpg",
    alt: "Image 2",
    dis: "使用开箱即用的数据桥接，只需简单点击操作就能与 40 多个云服务、数据库和企业系统无缝集成，快速构建物联网应用",
  },
  {
    src: "/zhiping/homegb1.jpg",
    alt: "Image 3",
    dis: "强大的基于 SQL 的规则引擎或流处理引擎，以灵活、丰富的操作实时提取、过滤、转换和处理物联网数据",
  },
];

const HXYW = [
  {
    title: "数据桥接、智慧制造",
    dis: "面向各行业客户打造数字原生云操作系统生态合作计划，开放对接超百家云原生生态产品，整合生态伙伴技术、产品、运营服务等能力，打造完整的解决方案体系。",
    links: [
      {
        url: "#",
        name: "联系我们",
      },
    ],
    color: "#FF9800",
  },
  {
    title: "互联网+中间件",
    dis: "互联网+中间件，只需简单点击操作就能与 40 多个云服务、数据库和企业系统无缝集成，快速构建物联网应用。Mako 是基于 Rust 的「极快」和「生产级」的前端构建工具。现已开源！",
    links: [
      {
        url: "#",
        name: "去了解",
      },
    ],
    color: "#9C27B0",
  },
  {
    title: "协同创新，生态开放",
    dis: "使用基于 SQL 的规则引擎或流处理引擎，实时提取、过滤、丰富和转换您的物联网数据。生产级云原生底座，兼容多种底层基础设施，支持信创异构、云边协同，轻松创建和纳管大规模多集群，",
    color: "#009be2",
    links: [
      {
        url: "#",
        name: "去了解",
      },
    ],
  },
  {
    title: "工业4.0+AI制造",
    dis: "提供云原生计算、网络、存储等能力，兼容各种集群接入，支持集群全生命周期管理。突破 Kubernetes API 性能瓶颈，可实现超大规模并发，并针对企业环境提供全栈场景化的网络方案。",
    color: "#7d4dc7",
    links: [
      {
        url: "#",
        name: "去了解",
      },
    ],
  },
];

// 服务案例
const FWAL = [
  {
    title: "WPF程序性能优化",
    dis: "融入飞行制作特种行业，降低时延到毫秒级别农业设备和后端数据系统的数据通道，实现数据驱动的智能化农业",
    img: "/zhiping/fwal1.webp",
    link: "#",
  },
  {
    title: "江森自控特种设备生产管理系统",
    dis: "软硬件结合，实现工业互联网化统造成灾难影响的问题。 在测试程序统造成灾难影响的问题。 在统造成灾难影响的问题。 在",
    img: "/zhiping/fwal2.webp",
    link: "#",
  },
  {
    title: "微软CMS网站 ORCHARD开发",
    img: "/zhiping/fwal3.webp",
    dis: "提供云原生计算、网络、存储等能力，兼容各种集群接入，支持集群全生命周期管理。",
    detail:
      "互联网+中间件，只需简单点击操作就能与 40 多个云服务、数据库和企业系统无缝集成，快速构建物联网应用。Mako ",
    links: "#",
  },
  {
    title: "立陶宛ADFORM广告点击统计分析平台",
    img: "/zhiping/fwal6.webp",
    dis: "使用基于 SQL 的规则引擎或流处理引擎，实时提取、过滤、丰富和转换您的物联网数据。生产级云原生底座，兼容多种底层基础设施，支持信创异构、云边协同，轻松创建和纳管大规模多集群，",
    links: "#",
  },
  {
    title: "智慧农业应用",
    dis: "提供云原生计算、网络、存储等能力，兼容各种集群接入，支持集群全生命周期管理。",
    img: "/zhiping/fwal6.webp",
    links: "#",
  },
  {
    title: "农业的数据系统",
    dis: "提在数字化浪潮的推动下，车联网正成为汽车行业的重要趋势。智能网联汽车的发展不仅提升了驾驶体验",
    img: "/zhiping/fwal3.webp",
    links: "#",
  },
];

const getPartners = async () => {
  const directory = path.join(process.cwd(), "public/zhiping/partners");
  const names = await fsPromises.readdir(directory);
  return names;
};

const partners = await getPartners();

export default function Home() {
  return (
    <main className="flex w-full flex-center" style={{ marginTop: "64px" }}>
      <div className="w-full">
        <Carousel autoplay fade speed={1000} infinite>
          {imgs.map((item) => (
            <div className="w-full relative" key={item.src}>
              <Image
                src={item.src}
                alt={item.alt}
                width={1920}
                height={400}
                key={item.src}
                className="w-full"
                quality={100}
                style={{ height: "400px", opacity: 0.8 }}
              />
              <div className="absolute top-1/4 left-10 font-bold text-red-400 text-2xl">
                {item.dis}
              </div>
            </div>
          ))}
        </Carousel>

        <div className="w-full bg-gradient1">
          <div className="container">
            <div className="justify-center flex flex-col">
              <div className="flex justify-center mb-8">
                <div className="fs24 font-bold">核心业务</div>
              </div>
              <Row className="justify-center" gutter={[16, 16]}>
                {HXYW.map((item) => (
                  <Col
                    className=""
                    key={item.title}
                    sm={24}
                    md={12}
                    lg={12}
                    xl={6}
                    xxl={6}
                  >
                    <div
                      className={`flex flex-col justify-between home-card hvr-grow-shadow hvr-overline-from-left h-full`}
                    >
                      <div>
                        <div
                          className="fs18 font-bold py-6"
                          style={{ color: item.color }}
                        >
                          {item.title}
                        </div>
                        <div className="leading-8 fs14">{item.dis}</div>
                      </div>
                      <div className="flex flex-col pt-8">
                        {item.links.map((link, index) => (
                          <div key={index}>
                            <Link
                              href={link.url}
                              className="fs16 hvr-icon-wobble-horizontal"
                            >
                              {link.name}
                              <ArrowRightOutlined
                                style={{ marginLeft: "8px", fontWeight: 700 }}
                              />
                            </Link>
                          </div>
                        ))}
                      </div>
                    </div>
                  </Col>
                ))}
              </Row>
            </div>
          </div>
        </div>

        <div className="w-full bg-gradient2">
          <div className="container">
            <div className="justify-center flex flex-col">
              <div className="flex justify-center mb-8">
                <div className="fs24 font-bold">服务案例</div>
              </div>
              <Row className="justify-center" gutter={[16, 16]}>
                {FWAL.map((item) => (
                  <Col
                    className=""
                    key={item.title}
                    sm={12}
                    md={12}
                    lg={12}
                    xl={8}
                    xxl={8}
                  >
                    <Link href={item?.link || "#"}>
                      <div
                        className={`flex flex-col justify-between home-card1 h-full`}
                      >
                        <div>
                          <div className="relative w-full">
                            <Image
                              src={item.img}
                              alt={""}
                              width={400}
                              height={200}
                              // sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 100vw"
                              className="hover:scale-105 transition-transform duration-200 ease-out sm:object-fill"
                              style={{ borderRadius: "8px" }}
                            />
                          </div>
                          <div className="leading-8 fs16 font-bold pt-4">
                            {item.title}
                          </div>
                          <div className="leading-6 fs14 pt-2 text-gray-600">
                            {item.dis}
                          </div>
                        </div>
                      </div>
                    </Link>
                  </Col>
                ))}
              </Row>
            </div>
          </div>
        </div>
        <div className="w-full bg-gradient2">
          <div className="container">
            <div className="flex justify-center mb-8">
              <div className="fs24 font-bold">合作伙伴</div>
            </div>
            <div>
              <Carousel autoplay autoplaySpeed={5000} infinite>
                {[1, 2].map((findex) => (
                  <div key={findex}>
                    <div className="grid auto-cols-max gap-x-4 gap-y-4 grid-cols-2 grid-rows-4 md:grid-cols-4 md:grid-rows-2">
                      {partners
                        .slice((findex - 1) * 8, findex * 8)
                        .map((name, index) => (
                          <div key={name} className="flex justify-center items-center bg-white rounded-lg shadow-sm p-4">
                            <Image
                              src={`/zhiping/partners/${name}`}
                              alt={""}
                              width={110}
                              height={30}
                              className="max-h-[30px] md:max-h-[60px]"
                            />
                          </div>
                        ))}
                    </div>
                  </div>
                ))}
              </Carousel>
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}
